<template>
  <!-- 已结案列表 -->
  <div class="collectCaseClosed" v-loading="loading">
    <h3>已结案列表</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'姓名'">
        <el-input v-model.trim="searchInfo.realName" placeholder="请输入用户姓名"></el-input>
      </SearchWarp>
      <SearchWarp :label="'手机号'">
        <el-input v-model.trim="searchInfo.mobile" maxlength="11" placeholder="请输入手机号码"></el-input>
      </SearchWarp>
      <SearchWarp :label="'逾期天数'">
        <el-input class="inputWidth" v-model.trim="searchInfo.overDaysStart" placeholder="最短天数"></el-input>-
        <el-input class="inputWidth" v-model.trim="searchInfo.overDaysEnd" placeholder="最长天数"></el-input>
      </SearchWarp>
      <SearchWarp :label="'入催时间'">
        <el-date-picker
          v-model="searchInfo.entryTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <!-- <SearchWarp :label="'分配时间'" >
	          	<el-date-picker disabled  type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期"
	                          end-placeholder="结束日期" :editable="true"></el-date-picker>
      </SearchWarp>-->
      <SearchWarp :label="'结案时间'">
        <el-date-picker
          v-model="searchInfo.completeTime"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :editable="false"
        ></el-date-picker>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <AreaTitleWarp :title="'订单列表'"></AreaTitleWarp>

    <!--搜索结果区域-->
    <AreaWarp :padding="false">
      <el-table
        size="mini"
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="id" label="订单ID"></el-table-column>
        <el-table-column prop="appId" label="产品" :formatter="formatter_product"></el-table-column>
        <el-table-column prop="realname" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="100"></el-table-column>
        <el-table-column prop="overdays" label="逾期天数"></el-table-column>
        <el-table-column prop="overMoney" label="逾期金额" min-width="90"></el-table-column>
        <el-table-column prop="discount" label="已减免金额" min-width="90"></el-table-column>
        <el-table-column prop="repayTotal" label="还款金额" min-width="90"></el-table-column>
        <el-table-column prop="entryTime" label="入催时间" min-width="150" :formatter="formatter_time"></el-table-column>
        <el-table-column
          prop="completeTime"
          label="结案时间"
          min-width="150"
          :formatter="formatter_time"
        ></el-table-column>
        <el-table-column
          prop="lastEntryTime"
          label="最近入催时间"
          min-width="150"
          :formatter="formatter_time"
        ></el-table-column>
      </el-table>
      <el-pagination
        layout="total,sizes,prev, pager, next, jumper"
        class="pub-page"
        :current-page="searchInfo.page"
        :page-sizes="[20,50,100]"
        :page-size="searchInfo.size"
        :total="tableInfo.total"
        @current-change="search"
        @size-change="handleSizeChange"
      ></el-pagination>
    </AreaWarp>
  </div>
</template>
<script>
import Collection from "../../../assets/js/collection.js";
export default {
  data() {
    return {
      searchInfo: {
        realName: "",
        mobile: "",
        overDaysStart: "",
        overDaysEnd: "",
        entryTime: "",
        completeTime: "",
        size: 20,
        page: 1
      },
      loading: false,
      statusOptions: [],
      tableInfo: {
        collectionList: [],
        total: 0
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;
      let x = {
        realName: that.searchInfo.realName,
        mobile: that.searchInfo.mobile,
        overDaysStart: that.searchInfo.overDaysStart,
        overDaysEnd: that.searchInfo.overDaysEnd,
        entryTime: that.searchInfo.entryTime,
        completeTime: that.searchInfo.completeTime,
        size: that.searchInfo.size,
        page: that.searchInfo.page
      };
      let collection = new Collection(x);
      let reqData = collection.getState();
      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }

      that.ajaxJson({
        url: "/collection/completelist",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
        }
      });
    },
    reset() {
      let that = this;
      that.searchInfo = {
        realName: "",
        mobile: "",
        overDaysStart: "",
        overDaysEnd: "",
        entryTime: "",
        size: 20,
        page: 1
      };
      that.search();
    }
  },
  created() {
    let that = this;
    that.search();
  },
  beforeCreate() {
    let that = this;
  }
};
</script>
<style lang="less">
.collectCaseClosed {
  .inputWidth {
    width: 120px;
  }
}
</style>
